{% extends "base.html" %}

{% block content %}
<script type="text/javascript">
var cartographer;
var map;
var center = new GLatLng(39, -95);
var zoom = 4;
var data_list1;
var data_list2;
var options;
var prevValue;
var t;
var timer_is_on=false;

function load() {
	if( GBrowserIsCompatible() ) {
		map = new GMap2(document.getElementById("map"));
	    map.setCenter(new GLatLng(18, 0), 2);
		//map.setCenter(new GLatLng(39, 0), 4);
	    map.addControl(new GSmallZoomControl());
	    map.setMapType(G_PHYSICAL_MAP);
	    cartographer = Cartographer( map, { colorize:"#FFF", colorizeAlpha:.3 } );
		//console.log(cartographer.bbox);
		data_list1 = [
			{% for coords in locations1%}
				[
				{% for ll, v in coords%}
					{ lat:{{ll.0}}, lng:{{ll.1}}, val:{{v}}, label:"{{searchedfor1}}" },
				{% endfor %}
				],
			{% endfor %}
		];
		
		data_list2 = [
			{% for coords in locations2%}
				[
				{% for ll, v in coords%}
					{ lat:{{ll.0}}, lng:{{ll.1}}, val:{{v}}, label:"{{searchedfor2}}" },
				{% endfor %}
				],
			{% endfor %}
		];
		
		prevValue = data_list1.length-1
		options = { color:"#FF0000", enableGrid:false };
		if(data_list1[prevValue].length > 0)
			cartographer.cluster( data_list1[prevValue], options );
		if(data_list2[prevValue].length > 0){
			options = { color:"#0000ff", enableGrid:false };
			cartographer.cluster( data_list2[prevValue], options );
		}
	    map.setCenter(center, zoom);
	}
}

function changeSlider(newValue, isUser)
{
	if(isUser)
		stopTimer();		
	
	if(newValue==prevValue)
		return
	prevValue = newValue
	
	var text;
	if(newValue==data_list1.length-1)
		text="Today"
	else if(newValue==data_list1.length-2)
		text="Yesterday"
	else
		text = data_list1.length -1 - newValue + " days ago"
	document.getElementById("sliderVal").innerHTML=text;
	document.getElementById("slider").value=newValue;
	
	center = map.getCenter();
	zoom = map.getZoom();

	if( GBrowserIsCompatible() ) {
		delete map
		map = new GMap2(document.getElementById("map"));
	    map.setCenter(new GLatLng(18, 0), 2);
		//map.setCenter(new GLatLng(39, 0), 4);
	    map.addControl(new GSmallZoomControl());
	    map.setMapType(G_PHYSICAL_MAP);
	    cartographer = Cartographer( map, { colorize:"#FFF", colorizeAlpha:.3 } );
		//console.log(cartographer.bbox);
		
		options = { color:"#FF0000", enableGrid:false };		
		values = data_list1[newValue];
		// clusterer breaks for days with no data, so in that case just leave the map empty
		if(values.length > 0)
			cartographer.cluster( values, options );
			
		options = { color:"#0000ff", enableGrid:false };
		values = data_list2[newValue];
		if(values.length > 0)
			cartographer.cluster( values, options );
	    map.setCenter(center, zoom);
	}

}

function timedCount()
{
	var changeTo = prevValue==0 ? data_list1.length-1 : prevValue-1;
	changeSlider(changeTo, false);
	t=setTimeout("timedCount()",1000);
}

function playClicked() {
	if(timer_is_on)
	{
		stopTimer();		
	} else {
		timer_is_on=true;
		document.getElementById("play").value="Stop";
		timedCount();
	}
}

function stopTimer()
{
	clearTimeout(t);
	timer_is_on=0;	
	document.getElementById("play").value="Play";
}

</script>

<h2>Viewing data for: <strong>{{searchedfor1}}(red) &amp; {{searchedfor2}}(blue)</strong></h2>
{% if hasResults %}

{% else %}
No results were found for this search.
{% endif %}

<table><tr><td>
<div id="map" style="margin:0 auto; width:675px;height:400px; border:1px solid #000;"></div>
<form>
<input type="button" id="play" value="Play" onClick="playClicked()">
<input id="slider" type="range" min="0" max="{{locations1|length|add:"-1"}}" value="{{locations1|length|add:"-1"}}" step="1" onchange="changeSlider(this.value, true)" />
<span id="sliderVal">Today</span>
</form>
</td>
<td><center><img src="{{chart_url}}" /><br>Percentage similarity by day</center></td>
</tr></table>

<h2>Similarity</h2>
These two trends are {{total_score|floatformat:"0"}}% similar by time and location.

<h2>Recent Tweets</h2>
<ul>
	{% for tweet in tweets %}
	<li><strong><a href="http://twitter.com/{{tweet.user}}">{{tweet.user}}</a></strong> says, &quot;{{tweet.text}}&quot;</li>
	{% endfor %}
</ul>

{% endblock %}